<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>游戏用户列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/layui/css/layui.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/bootstrap/css/bootstrap.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/common/global.css}" media="all">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/personal.css}" media="all">
</head>
<body>
<section class="layui-larry-box">
	<div class="larry-personal">
		<div class="layui-tab" lay-filter="test">
			<blockquote class="layui-elem-quote news_search">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input value="" placeholder="请输入关键字" id="keyword" class="layui-input search_input" type="text">
					</div>
					<a class="layui-btn search_btn">查询</a>
				</div>

				<div class="layui-inline">
					<a href="javascript:;" class="refresh refreshThis"><i class="layui-icon">&#x1002;</i> 刷新</a>
				</div>

				<div class="layui-inline">
					<div class="layui-form-mid layui-word-aux">本页面刷新后除新添加的信息外所有操作无效，关闭页面所有数据重置</div>
				</div>

			</blockquote>

			<!-- 操作日志 -->
			<div class="layui-form news_list">
				<table class="layui-table">
					<colgroup>
						<col width="20">
						<col width="20%">
						<col width="20%">
						<col width="20%">
						<col width="20%">
					</colgroup>
					<thead>
					<tr>
						<th>
							<input name="checkbox" lay-skin="primary" lay-filter="allChoose" id="allChoose" type="checkbox">
							<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
						</th>
						<th style="text-align:center;">用户昵称</th>
						<th>用户账号</th>
						<th>用户头像</th>
						<th>发布时间</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody class="news_content">
						<tr th:each="item,stat : ${list}">
							<td>
								<input name="checkbox" lay-skin="primary" th:value="${item.id}" lay-filter="choose" type="checkbox">
								<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div>
							</td>
							<td align="center" th:text="${item.nickName}">css3用transition实现边框动画效果</td>
							<td th:text="${item.accountNumber}">请叫我马哥</td>
							<td>
								<img th:src="${item.faceImg}" style="width: 80px;height: 50px">
							</td>
							<td th:text="${item.createTime}">2017-04-14</td>
							<td>
								<a class="layui-btn layui-btn-mini news_edit" th:attr="data-id= ${item.id}"><i class="iconfont icon-edit"></i> 编辑</a>
								<a class="layui-btn layui-btn-danger layui-btn-mini news_del" th:attr="data-id= ${item.id}" ><i class="layui-icon"></i> 删除</a>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="larry-table-page clearfix">
					<a href="javascript:;" id="delete_batch_a" class="layui-btn layui-btn-small"><i class="iconfont icon-shanchu1"></i>删除</a>
					<div id="page" class="page"></div>
				</div>
			</div>
		</div>
	</div>

</section>
<script type="text/javascript" th:src="@{/static/common/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/livingbuild.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    var totalPage = [[${totalPage}]];
    layui.use(['jquery','layer','element','laypage','form'],function(){
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        var element = layui.element();
	    var laypage = layui.laypage;
		var	form = layui.form();
		$(".refresh").on("click",function () {
			window.location.href="/mapmanagement/map/livingbuilding/list";
        });

        pageSeach(totalPage,form,laypage);
        $(".search_btn").on("click",function () {
            var title = $("#keyword").val();
			addHtml(title,laypage,form);
        });

    });

    function addHtml(title,laypage,form) {
        $.ajax({
            url:"/mapmanagement/map/livingBuilding/search/list",
            data:{
                'currPage':1,
                'title':title,
            },
            method:'post',
            dataType:'json',
            traditional:true,
            success: function (data) {
                console.log(data);
                totalPage = data.count;
                var html = "";
                $.each(data.data,function (i,item) {
                    html+='<tr>'
                        +'<td><input name="checkbox" lay-skin="primary" value="'+item.id+'" lay-filter="choose" type="checkbox">'
                        +'<div class="layui-unselect layui-form-checkbox" lay-skin="primary">' +
                        '<i class="layui-icon"></i></div>'
                        +'</td>'
                        + '<td align="center">'+item.nickName+'</td>'
						+'<td>'+item.accountNumber+'</td>'
                        +'<td>'
                        +'<img src="'+item.faceImg+'" style="width: 80px;height: 50px">'
                        +'</td>'
                        +'<td>'+item.createTime+'</td>'
                        +'<td>'
                        +'<a class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit"></i> 编辑</a>'
                        +'<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+item.id+'"><i class="layui-icon"></i> 删除</a>'
                        +'</td>'
                        +'</tr>'
                });
                $(".news_content").empty().append(html);
                form.render();
                pageSeach(totalPage,form,laypage);
            }
        });
    }
    function pageSeach (totalPage,form,laypage){
        laypage({
            cont: 'page',
            pages: totalPage,//总页数
            groups: 5, //连续显示分页数
            jump: function(obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var currPage = obj.curr;
                var title = $("#keyword").val();
                if(!first) {
                    //layer.msg('第 '+ obj.curr +' 页');
                    $.ajax({
                        url:"/mapmanagement/map/livingBuilding/search/list",
                        data:{
                            'currPage':currPage,
                            'title':title
                        },
                        method:'post',
                        dataType:'json',
                        traditional:true,
                        success: function (data) {
                            totalPage = data.count;
                            var html = "";
                            $.each(data.data,function (i,item) {
                                html+='<tr>'
                                    +'<td><input name="checkbox" lay-skin="primary" value="'+item.id+'" lay-filter="choose" type="checkbox">'
                                    +'<div class="layui-unselect layui-form-checkbox" lay-skin="primary">' +
                                    '<i class="layui-icon"></i></div>'
                                    +'</td>'
                                    + '<td align="center">'+item.nickName+'</td>'
									+'<td>'+item.accountNumber+'</td>'
                                    +'<td>'
                                    +'<img src="'+item.faceImg+'" style="width: 80px;height: 50px">'
                                    +'</td>'
                                    +'<td>'+item.createTime+'</td>'
                                    +'<td>'
                                    +'<a class="layui-btn layui-btn-mini news_edit"><i class="iconfont icon-edit"></i> 编辑</a>'
                                    +'<a class="layui-btn layui-btn-danger layui-btn-mini news_del" data-id="'+item.id+'"><i class="layui-icon"></i> 删除</a>'
                                    +'</td>'
                                    +'</tr>'
                            });
                            $(".news_content").empty().append(html);
                            form.render();
                        }
                    });
                }
            }
        });
    };
    /*]]>*/


</script>
</body>
</html>